<template>
  <div>
    <h1>User Info</h1>
    <p v-if="loading">Loading...</p>
    <p v-if="error">{{ error }}</p>
    <div v-if="user">
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      user: null,
      loading: false,
      error: null,
    };
  },
  methods: {
    async fetchUser() {
      try {
        this.loading = true; // 显示加载状态
        const response = await axios.get('https://v2.xxapi.cn/api/horoscope'); // 替换为你的API URL
        this.user = response.data; // 设置用户数据
      } catch (err) {
        this.error = err.message; // 设置错误信息
      } finally {
        this.loading = false; // 无论成功还是失败，都停止加载状态
      }
    }
  },
  mounted() {
    this.fetchUser(); // 组件挂载后调用方法获取数据
  }
};
</script>